<template>
	<view>
		<view class="section-t-header">选择您需要退款的商品</view>
		<view class="product-wrap">
			<view class="product-item" v-for="list in orderDetails.orderDetailVOList" :key="list.productVO.id">
				<view class="product-item__checkbox-box"><u-checkbox v-model="list.my_self_checked" shape="circle"
						:size="40" active-color="#4BB019"></u-checkbox></view>
				<view class="product-goods">
					<view class="product-goods-cover">
						<image :src="list.my_self_cover" mode="aspectFill"
							class="order-card__goods-img am-block am-wh-100"></image>
					</view>
					<view class="product-goods-con">
						<view class="product-goods-main">
							<view class="product-goods-title">
								<text class="am-line-clamp-two text-nowrap">{{ list.productVO.name }}</text>
								<text class="specStyle">{{ list.productVO.spec }}</text>
							</view>
							<view class="product-goods-price original-price">原价: {{ orderDetails.originalPrice }}</view>
							<view class="product-goods-price">{{ list.orderPrice }}元x{{ list.num }}</view>
						</view>
						<view class="product-goods-total am-text-eill">￥{{ list.my_self_total }}</view>
					</view>
				</view>
			</view>
		</view>

		<view class="page-footer-bar-place"></view>
		<view class="page-footer-bar am-flex-rc-between">
			<button class="u-reset-button co-primary-button submit-button" hover-class="co-primary-button--hover"
				:class="{ 'allow': allowClick }" @click="submitCheck">
				确定
			</button>
		</view>
	</view>
</template>

<script>
import { apiOrderDetails } from '@/api/order.js';
import Big from 'big.js';
export default {
	data() {
		return {
			pageQuery: {},
			orderDetails: {
				orderDetailVOList: []
			}
		};
	},
	/**
	 * @param {Object} options - 页面参数
	 * @param {String} options.id - 订单id
	 * */
	onLoad(options) {
		this.pageQuery = options;
		if (options.id) {
			this.getDetails();
		}
	},
	computed: {
		allowClick() {
			return this.orderDetails.orderDetailVOList.some(p1 => p1.my_self_checked)
		}
	},
	methods: {
		submitCheck() {
			if (!this.allowClick) return
			let checkGoods = this.orderDetails.orderDetailVOList.filter(p1 => p1.my_self_checked)
			let checkOid = checkGoods.map(p1 => p1.productVO.pid)
			this.$u.route('pages/order-after-sales/after-sales-amount', {
				orderId: this.pageQuery.id,
				goodsPids: checkOid.toString()
			})
		},
		getDetails() {
			uni.showLoading({
				mask: true
			});
			apiOrderDetails({ id: this.pageQuery.id })
				.then(res => {
					let { state, data, msg } = res.data;
					if (state === 'OK') {
						let imageCutting = this.$imageCutting;
						data.orderDetailVOList.forEach(p1 => {
							p1.my_self_checked = false;
							p1.my_self_total = Number(new Big(p1.orderPrice).times(p1.num));
							p1.my_self_cover = imageCutting(p1.productVO.banner.split(',')[0], 120, 120);
						});
						this.orderDetails = data;
						uni.hideLoading();
					} else {
						uni.hideLoading();
						this.$am_toast.warning(msg);
					}
				})
				.catch(err => {
					console.log(err);
					uni.hideLoading();
					this.$am_toast.error('查询失败，请重新尝试！');
				});
		}
	}
};
</script>

<style lang="scss" scoped>
$section-plr: 32rpx;

.section-t-header {
	height: 56rpx;
	line-height: 56rpx;
	padding: 0 $section-plr;
	font-size: 24rpx;
	color: #999999;
}

.product-wrap {
	padding: 0 32rpx;
	background-color: #fff;
}

.product-item {
	display: flex;
	align-items: center;
	padding: 28rpx 0;

	&+.product-item {
		border-top: 1px dashed #e8e8e8;
	}
}

.product-item__checkbox-box {
	flex-shrink: 0;
	margin-right: 18rpx;

	/deep/ .u-checkbox__label {
		margin-left: 0;
		margin-right: 0;
	}
}

.product-goods {
	display: flex;
	flex: 1;
	width: 0;
}

.product-goods-cover {
	overflow: hidden;
	flex-shrink: 0;
	width: 120rpx;
	height: 120rpx;
	border-radius: 8rpx;
}

.order-card__goods-img {}

.product-goods-con {
	display: flex;
	flex: 1;
	width: 0;
	margin-left: 10rpx;
	align-items: center;
}

.product-goods-main {
	flex: 1;
	width: 0;
}

.product-goods-title {
	height: 80rpx;
	font-size: 30rpx;
	color: #333333;
	line-height: 42rpx;
}

.product-goods-price {
	font-size: 24rpx;
	color: #999999;
}

.product-goods-total {
	width: 140rpx;
	padding-left: 15rpx;
	flex-shrink: 0;
	text-align: right;
	font-size: 30rpx;
	color: #333333;
}

.page-footer-bar {
	position: fixed;
	left: 0;
	bottom: 0;
	z-index: 1500;
	height: 100rpx;
	width: 750rpx;
	padding: 27rpx 0;
	background-color: #fff;
}

.page-footer-bar-place {
	height: 100rpx;
}

.submit-button {
	width: 690rpx;
	opacity: .6;

	&.allow {
		opacity: 1;
	}
}

.specStyle {
	margin-top: 10rpx;
	padding: 5rpx 10rpx;
	background: rgba(239, 239, 244, 0.5);
	color: #999999;
	border-radius: 4rpx;
	font-size: 22rpx;
}

.text-nowrap {
	white-space: nowrap
}
</style>
